<template>
    <div>
        <h1>子组件</h1>
        <!-- 通过props传过来的值，是可以直接使用的 -->
        <h2>{{info}}</h2>
        <h2>{{obj}}</h2>
        <!-- $attrs中的值 通过setup函数的context参数在加上return返回-->
        <h3>{{msg}}</h3>
        <h3>{{msg1}}</h3>
        <!-- 通过生命周期钩子函数实现$attrs传值 -->
        <h4>{{$attrs.msg}}</h4>
        <!-- 在子组件中实现父组件的拼串 -->
        <button @click="pinchuan">拼串</button>

        <GrandSon></GrandSon>
    </div>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue'
//引入组件
import GrandSon from './GrandSon.vue'

export default defineComponent({
    components:{
        GrandSon
    },
    //props传值
    // props:['info','obj'],
    props:{
        info:{
            type:String,
            required:true,//是否必传
            default:'xxx'//默认值
        },
        obj:{
            type:Object,
            required:false,
            //对于引用数据类型的默认值，设置是通过箭头函数的返回值来设置的
            default:()=>{
                return {}
            }
        }
    },

    //emit 数组，用来接收父组件在子组件标签上绑定的自定义事件事件   可写可不写，但是建议写，因为这里记录了该子组件接收了父组件的哪些自定义事件
    emit:['fun'],

    //在vue3中，很多方法的定义，都是在setup函数中进行定义的，setup当中是否能闹到props的值
    //通过setup函数的参数： props(用来接收props传值的)、context对象。
    setup (props,context) {
        // console.log(this)  undefined
        console.log(props)//proxy对象
        console.log(props.info)//今天天气好晴朗！
        console.log(props.obj)//proxy对象
        console.log(props.obj.name)//tom

        console.log(context)//对象，里面有atters、emit、slots等等
        console.log(context.attrs)//proxy对象
        console.log(context.attrs.msg)//小朋友，好好学习，多多劳动。
        //⭐  proxy对象是响应式数据
        let msg = context.attrs;
        let msg1 = ref(context.attrs.msg);

        //emit 类似于 $emit  可用来触发分发事件，实现子传父 传值
        console.log(context.emit)//(event, ...args) => instance.emit(event, ...args)    是一个函数  
        // context.emit('fun')//调用自定义事件 fun
        context.emit('fun','你好啊，我来自子组件')//使用$emit触发分发事件，实现子传父 传值

        // 在子组件中实现传值父组件并拼串
        function pinchuan(){
            context.emit('fun','在子组件中实现传值父组件并拼串。')
        }

        return {
            msg,
            msg1,
            pinchuan
        }
    },
    mounted(){
        console.log(this.$attrs)//proxy对象
        console.log(this.$attrs.msg)
    }
})
</script>

<style scoped>

</style>